<!--  -->
<template>
  <div class="box flex grow column">
    <div class="up flex grow">
      <div class="up-l flex grow column">
        <img
          src="../images/living1.png"
          class="liveBanner"
          style="height: 100%"
          v-show="bannerShow"
          alt=""
        />
        <iframe
          :src="videoUrl"
          v-show="videoUrl"
          style="height: 100%"
          frameborder="0"
        ></iframe>
        <el-carousel
          height="100%"
          :interval="3000"
          ref="carousel"
          :autoplay="true"
          arrow="never"
          :loop="true"
          v-show="!videoUrl"
        >
          <el-carousel-item v-for="item in bannerList" :key="item.id">
            <img
              @click="openPoup(item.link, '详情')"
              class="banner"
              :src="item.imgUrlClient"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="up-r flex grow column">
        <div class="flex grow" style="height: 50%">
          <div class="flex column fixed">
            <Title
              name="博赢内参"
              :link="
                '/articleList/' + article1.params.articleType + '/' + token
              "
            ></Title>
            <div class="list">
              <div
                class="item flex"
                v-for="item in article1.articleList"
                :key="item.articleId"
                @click="
                  openPoup(
                    path +
                      '/client/clientNewsDetail/index.html?newsId=' +
                      item.articleId,
                    '详情'
                  )
                "
              >
                <div class="title">
                  <span :class="item.class">{{ item.articleTitle }}</span>
                  <img src="../images/new.png" v-show="item.icon" />
                </div>
                <span class="time shrink">{{ item.publishTime }}</span>
              </div>
            </div>
          </div>
          <div class="flex column fixed">
            <Title
              name="百战奇略"
              :link="
                '/articleList/' + article2.params.articleType + '/' + token
              "
            ></Title>
            <div class="list">
              <div
                class="item flex"
                v-for="item in article2.articleList"
                :key="item.articleId"
                @click="
                  openPoup(
                    path +
                      '/client/clientNewsDetail/index.html?newsId=' +
                      item.articleId,
                    '详情'
                  )
                "
              >
                <div class="title">
                  <span :class="item.class">{{ item.articleTitle }}</span>
                  <img src="../images/new.png" v-show="item.icon" />
                </div>
                <span class="time shrink">{{ item.publishTime }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="flex grow" style="height: 50%">
          <div class="flex grow column fixed">
            <Title
              name="导读要闻"
              :link="
                '/articleList/' + article3.params.articleType + '/' + token
              "
            ></Title>
            <div class="list">
              <div
                class="item flex"
                v-for="item in article3.articleList"
                :key="item.articleId"
                @click="
                  openPoup(
                    path +
                      '/client/clientNewsDetail/index.html?newsId=' +
                      item.articleId,
                    '详情'
                  )
                "
              >
                <div class="title">
                  <span :class="item.class">{{ item.articleTitle }}</span>
                  <img src="../images/new.png" v-show="item.icon" />
                </div>
                <span class="time shrink">{{ item.publishTime }}</span>
              </div>
            </div>
          </div>
          <div class="flex grow column fixed">
            <Title
              name="热点聚焦"
              :link="
                '/articleList/' + article4.params.articleType + '/' + token
              "
            ></Title>
            <div class="list">
              <div
                class="item flex"
                v-for="item in article4.articleList"
                :key="item.articleId"
                @click="
                  openPoup(
                    path +
                      '/client/clientNewsDetail/index.html?newsId=' +
                      item.articleId,
                    '详情'
                  )
                "
              >
                <div class="title">
                  <span :class="item.class">{{ item.articleTitle }}</span>
                  <img src="../images/new.png" v-show="item.icon" />
                </div>
                <span class="time shrink">{{ item.publishTime }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="down flex grow">
      <div class="down-l flex grow">
        <div class="flex grow column fixed" style="min-width: 321px">
          <Title name="课程预告" more="课程表" @notice="getNoticeList"></Title>
          <div class="notice">
            <img
              src="../images/wushuju.png"
              v-show="
                !noticeData.nowLive.time &&
                !noticeData.nowRecord.time &&
                noticeData.lastRecord.length == 0
              "
              class="noMore"
              alt=""
            />
            <div
              class="noticeBox flex grow"
              v-show="noticeData.nowLive.time || noticeData.nowRecord.time"
            >
              <div class="flex now column shrink">今日</div>
              <div class="noticeList flex grow column">
                <div class="item clear" v-show="noticeData.nowLive.time">
                  <span class="txt fl"
                    >{{ noticeData.nowLive.time
                    }}{{ noticeData.nowLive.channelName }}</span
                  ><span class="btn fr">
                    <img v-show="liveState" src="../images/zzzb.png" alt="" />
                    <img
                      v-show="!liveState"
                      src="../images/jijiangkaishi.png"
                      alt=""
                    />
                  </span>
                </div>
                <div
                  class="item clear"
                  v-show="noticeData.nowRecord.time"
                  @click="
                    openPoup(
                      path +
                        '/client/recordLiveOff.htm?recordId=' +
                        noticeData.nowRecord.recordId,
                      noticeData.nowRecord.channelName
                    )
                  "
                >
                  <span class="txt fl"
                    >{{ noticeData.nowRecord.time
                    }}{{ noticeData.nowRecord.channelName }}</span
                  ><span class="btn fr">
                    <img src="../images/kechenghuifang.png" alt="" />
                  </span>
                </div>
              </div>
            </div>
            <div
              class="noticeBox flex grow"
              v-show="noticeData.lastRecord.length > 0"
            >
              <div class="flex last column shrink">昨日</div>
              <div class="noticeList flex grow column">
                <div
                  class="item clear"
                  v-for="item in noticeData.lastRecord"
                  :key="item.videoId"
                  @click="
                    openPoup(
                      path +
                        '/client/recordLiveOff.htm?recordId=' +
                        item.recordId,
                      item.channelName
                    )
                  "
                >
                  <span class="txt fl"
                    >{{ item.time }}{{ item.channelName }}</span
                  ><span class="btn fr">
                    <img src="../images/kechenghuifang.png" alt="" />
                  </span>
                </div>
              </div>
            </div>
            <p class="more">
              <router-link
                :to="
                  '/recordList/' +
                  productId +
                  '/' +
                  video1.params.videoConfigId +
                  '/往期课程/' +
                  token
                "
                >往期课程>></router-link
              >
            </p>
          </div>
        </div>
        <div class="flex grow column fixed">
          <Title
            name="精品视频"
            :link="
              '/recordList/' +
              productId +
              '/' +
              video1.params.videoConfigId +
              '/精品视频/' +
              token
            "
          ></Title>
          <div class="list">
            <div
              class="item flex"
              v-for="item in video1.videoList"
              :key="item.videoId"
              @click="
                openPoup(
                  path + '/client/recordLiveOff.htm?recordId=' + item.recordId,
                  '精品视频'
                )
              "
            >
              <span class="title" :class="item.class">{{ item.subject }}</span>
              <span class="time shrink">{{ item.createdTime }}</span>
            </div>
          </div>
        </div>
        <div class="flex grow column fixed">
          <Title
            name="乾坤课堂"
            :link="
              '/recordList/' +
              productId +
              '/' +
              video2.params.videoConfigId +
              '/乾坤课堂/' +
              token
            "
          ></Title>
          <div class="flex grow carousel-box">
            <el-carousel
              height="100%"
              class="carousel"
              :interval="3000"
              ref="carousel"
              :autoplay="false"
              arrow="never"
              :loop="true"
              indicator-position="none"
            >
              <el-carousel-item
                v-for="item in video2.videoList"
                :key="item.videoId"
              >
                <img
                  @click="
                    openPoup(
                      path +
                        '/client/recordLiveOff.htm?recordId=' +
                        item.recordId,
                      item.channelName
                    )
                  "
                  class="whole"
                  :src="item.wholeImage"
                />
                <p
                  @click="
                    openPoup(
                      path +
                        '/client/recordLiveOff.htm?recordId=' +
                        item.recordId,
                      item.channelName
                    )
                  "
                  class="title"
                  :class="item.class"
                >
                  {{ item.subject }}
                </p>
              </el-carousel-item>
            </el-carousel>
            <div class="arrow arrow-left" @click="prev"></div>
            <div class="arrow arrow-right" @click="next"></div>
          </div>
        </div>
      </div>
      <div class="down-r flex grow">
        <div class="flex grow column fixed">
          <Title
            name="入门指南"
            :link="
              '/recordList/' +
              productId +
              '/' +
              video3.params.videoConfigId +
              '/入门指南/' +
              token
            "
          ></Title>
          <div class="list">
            <div
              class="item flex"
              v-for="item in video3.videoList"
              :key="item.videoId"
              @click="
                openPoup(
                  path + '/client/recordLiveOff.htm?recordId=' + item.recordId,
                  item.subject
                )
              "
            >
              <span class="title" :class="item.class">{{ item.subject }}</span>
              <span class="time shrink">{{ item.createdTime }}</span>
            </div>
          </div>
        </div>
        <div class="flex grow column fixed" style="min-width: 408px">
          <Title name="连线大咖 无忧解股" more=""></Title>
          <div
            class="flex grow column"
            style="overflow: auto; position: relative"
          >
            <div class="flex golumn noMore" v-if="stockData.length == 0">
              <img src="../images/wushuju.png" alt="" />
            </div>
            <div class="flex column stock" v-if="stockData.length > 0">
              <div
                class="item flex shrink"
                v-for="item in stockData"
                :key="item.id"
              >
                <span class="code"
                  >{{ item.stockCode }}{{ item.stockName }}</span
                >
                <span class="people"
                  ><span class="num">{{ item.quizNum }}</span
                  >人提问</span
                >
              </div>
            </div>
            <div class="layer" :class="{ noHave: num == 0 }" v-show="layShow">
              {{ layTxt }}
            </div>
          </div>
          <div class="flex shrink query">
            <div class="count">
              可提问<span class="num">{{ num }}</span
              >次
            </div>
            <div class="stockInput">
              <div
                class="stockList-items top"
                v-show="listShow"
                @mouseleave="listShow = false"
              >
                <div
                  class="stockList-item clear"
                  v-for="item in stockList"
                  :key="item.stockName"
                  @click="choose(item.stockCode, item.stockName)"
                >
                  <span class="cell cell1" v-text="item.hqTypeLabel"></span>
                  <span
                    class="cell"
                    v-text="item.stockCode.match(/\d{6}/)[0]"
                  ></span>
                  <span class="cell" v-text="item.stockName"></span>
                </div>
              </div>
              <input
                type="text"
                v-model="stockTxt"
                placeholder="股票代码/名称/首字母"
              />
            </div>
            <div
              class="btn shrink"
              :class="{ notQuery: num == 0 }"
              @click="submit"
            ></div>
          </div>
        </div>
      </div>
    </div>

    <div class="refurbish" v-show="refurShow" @click="refurbish">刷新页面</div>
    <div class="timeTable flex" v-show="videoPoup">
      <div class="box">
        <span class="close" @click="videoPoup = false"></span>
        <div class="title"></div>
        <div class="container">
          <div class="flex noMore" v-show="recordList.length == 0">
            <img src="../images/wushuju.png" alt="" />
          </div>
          <div class="list" v-show="recordList.length > 0">
            <div class="item" v-for="item in recordList" :key="item.configId">
              <span>{{ item.time }}</span>
              <span>{{ item.channelName }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryArticleStock,
  queryArticleList,
  getStockList,
  getNoticeList,
  getVideoPage,
  getConnectList,
  getNewClientBanner,
  updateConnect,
  queryVideoConfig,
  userClickUpdate,
  queryRecordChargeLiveListByWeight,
  queryRecordChargeLiveList,
} from "../api/index";
import Title from "../component/Title";
import dayjs from "dayjs";

import debounce from "lodash/debounce";
import { openWeb, Timer } from "../script/utils";
import behavior from "@/common/behavior";
import { CLIENT } from "@/common/const";
const userData = () => ({ ...behavior });
export default {
  data() {
    return {
      path: CLIENT,
      productId: "",
      token: "",
      num: localStorage.getItem("count"),
      videoUrl: "",
      bannerShow: false,
      bannerList: [],
      stockList: [],
      stockData: [],
      recordList: [],
      timer: "",
      liveState: false,
      layShow: false,
      layTxt: "提问成功！",
      noticeData: {
        nowLive: {
          time: "",
          channelName: "",
        },
        nowRecord: {
          time: "",
          channelName: "",
        },
        lastRecord: [],
      },
      videoPoup: false,
      stockTxt: "",
      stockCode: "",
      stockName: "",
      listShow: false,
      article1: {
        name: "博赢内参",
        params: {
          limit: 10,
          articleType: "",
        },
        articleList: [],
      },
      article2: {
        name: "百战奇略",
        params: {
          limit: 10,
          articleType: "",
        },
        articleList: [],
      },
      article3: {
        name: "导读要闻",
        params: {
          limit: 10,
          articleType: "",
        },
        articleList: [],
      },
      article4: {
        name: "热点聚焦",
        params: {
          limit: 10,
          articleType: "",
        },
        articleList: [],
      },
      video1: {
        name: "精品视频",
        params: {
          pageSize: 8,
          videoConfigId: null,
          recordType: 1,
        },
        videoList: [],
      },
      video2: {
        name: "乾坤课堂",
        params: {
          pageSize: 3,
          videoConfigId: null,
        },
        videoList: [],
      },
      video3: {
        name: "入门指南",
        params: {
          pageSize: 8,
          videoConfigId: null,
        },
        videoList: [],
      },
      couter: 0,
      refurShow: false,
    };
  },
  watch: {
    stockTxt: debounce(async function () {
      if (this.stockTxt.length >= 1) {
        await getStockList({ content: this.stockTxt }).then((back) => {
          if (back.status == 1) {
            let stocks = back.data.stocks;
            if (stocks.length > 0) {
              this.stockList = stocks;
              this.listShow = true;
            }
          }
        });
      } else {
        this.listShow = false;
      }
    }, 500),
  },
  components: { Title },

  computed: {},
  beforeRouteEnter(to, from, next) {
    const { productId, token, checkCode } = to.params;
    next((vm) => {
      vm.productId = productId;
      vm.checkCode = checkCode;
      vm.token = token;
      vm.getNewClientBanner();
      vm.getVideoPage();
      // vm.getNoticeList();
      vm.queryArticleStock();
      vm.queryVideoConfig();
      vm.getConnectList();
      vm.setCount();
    });
  },
  mounted() {
    this.refurTime();
  },

  methods: {
    async userClick() {
      await userClickUpdate(userData()).then((back) => {
        if (back.status == 1) {
          const data = back.data;
        }
      });
    },
    refurTime() {
      this.couter = 0;
      Timer(() => {
        if (this.couter > 60 * 5) {
          this.refurShow = true;
          this.couter = 0;
        }
        this.couter++;
        this.setCount();
      });
    },
    refurbish() {
      window.requestAnimationFrame((timestamp) => {
        // if (timestamp - this.startTime > 1000 * 60 * 5) {
        this.getNewClientBanner();
        this.getVideoPage();
        this.queryArticleStock();
        this.queryVideoConfig();
        this.getConnectList();
        this.setCount();
        this.timerDevice();
        // this.startTime = timestamp;
        this.couter = 0;
        this.refurShow = false;
        // }
      });
    },
    openPoup(url, title, type = 1) {
      if (!url) return;
      if (url.indexOf("public/static") > -1) {
        window.prompt(
          "",
          `up://["open_browser",${Date.now()},{"url":"${url}?${Date.now()}"}]`
        );
        return;
      }
      try {
        console.log(title, url);
        openWeb(url, title, type);
      } catch (error) {
        console.log(error);
      }
    },
    timerDevice() {
      if (this.noticeData.nowLive) {
        const now = Date.now();
        const { beginTime, endTime, channelId } = this.noticeData?.nowLive;
        const fMin = 1000 * 60 * 5;
        this.liveState = false;
        if (beginTime > now && beginTime - now < fMin) {
          this.bannerShow = true;
        }
        if (now > beginTime && now < endTime) {
          if (!this.videoUrl) {
            this.videoUrl = `http://yncytz.gensee.com/webcast/site/entry/join-${channelId}?nickName=加入直播间`;
          }
          this.bannerShow = false;
          this.liveState = true;
          this.timer = window.requestAnimationFrame(this.timerDevice);
          //   window.cancelAnimationFrame(this.timer);
        }
        if (now > endTime + 1000 * 60 * 30) {
          this.videoUrl = "";
          this.bannerShow = false;
          this.liveState = false;
          window.cancelAnimationFrame(this.timer);
        }
        if (now < beginTime) {
          this.timer = window.requestAnimationFrame(this.timerDevice);
        }
      }
    },
    async getNoticeList() {
      const startTime = dayjs(Date.now()).format("YYYY-MM-DD");
      const endTime = dayjs().add(7, "day").format("YYYY-MM-DD");
      await getNoticeList({
        productId: this.productId,
        beginTimeStr: startTime,
        endTimeStr: endTime,
      }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          this.recordList = data.map((item) => {
            item.time = dayjs(item.beginTimeStr).format("MM-DD HH:mm");
            return item;
          });
          this.videoPoup = true;
        }
      });
    },
    async getVideoPage() {
      // let {data: { nowLive, nowRecord, lastRecord },} =
      await getVideoPage({
        productId: this.productId,
      }).then((back) => {
        if (back.status == 1) {
          console.log(back.data, "back==");

          let nowLivec = back.data.nowLive;
          let nowRecord = back.data.nowRecord;
          let lastRecord = back.data.lastRecord;
          if (!nowLivec || nowRecord || lastRecord) return;
          if (nowLive) {
            const { beginTime, endTime, channelId } = nowLive;
            nowLive["time"] = dayjs(nowLive.beginTime).format("MM-DD HH:mm ");
            // if (now > beginTime && now < endTime) {
            //   this.videoUrl = `http://yncytz.gensee.com/webcast/site/entry/join-${channelId}?nickName=用户${now}`;
            // }
            this.noticeData.nowLive = nowLive;
            this.timer = window.requestAnimationFrame(this.timerDevice);
          }
          if (nowRecord) {
            nowRecord["time"] = dayjs(nowRecord.recordStartTime).format(
              "MM-DD HH:mm "
            );
            this.noticeData.nowRecord = nowRecord;
          }
          if (lastRecord) {
            this.noticeData.lastRecord = lastRecord.map((item) => {
              item.time = dayjs(item.recordStartTime).format("MM-DD HH:mm ");
              return item;
            });
          }
        }
      });
    },
    async choose(stockCode, stockName) {
      this.stockCode = stockCode.match(/\d{6}/)[0];
      this.stockName = stockName;
      this.stockTxt = `${this.stockCode} ${this.stockName}`;
    },
    layer() {
      this.layTxt =
        this.num == 0 ? "今天提问次数已用尽，请明天再来~" : "提问成功！";
      this.layShow = true;
      let timer;
      let num = 0;
      let step = (timestamp) => {
        setTimeout(() => {
          if (num == 3) {
            this.layShow = false;
            return window.cancelAnimationFrame(step);
          }
          num++;
          timer = window.requestAnimationFrame(step);
        }, 1000);
      };
      timer = window.requestAnimationFrame(step);
    },
    async submit() {
      //   this.setCount();
      if (this.num == 0) {
        return this.layer();
      }
      if (!this.stockCode || !this.stockName) return;
      this.num--;
      await updateConnect({
        stockCode: this.stockCode,
        stockName: this.stockName,
      }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          this.layer();
          localStorage.setItem("count", this.num);
          this.getConnectList();
          this.stockCode = "";
          this.stockName = "";
          this.stockTxt = "";
        }
      });
    },
    setCount() {
      let dayStr = new Date(
        dayjs(Date.now()).format("YYYY-MM-DD 00:00:00")
      ).getTime();
      const day = localStorage.getItem("day");
      const count = localStorage.getItem("count");
      if (!day) {
        this.num = 3;
        localStorage.setItem("day", dayStr);
        localStorage.setItem("count", this.num);
      }
      if (dayStr > day) {
        this.num = 3;
        localStorage.setItem("count", this.num);
        localStorage.setItem("day", dayStr);
      }
    },
    prev() {
      this.$refs.carousel.prev();
    },
    next() {
      this.$refs.carousel.next();
    },
    async getConnectList() {
      await getConnectList().then((back) => {
        if (back.status == 1) {
          let data = back;
          console.log(data.reverse, "data");
          if (!data.reverse) return;
          this.stockData = data.reverse() || [];
        }
      });
    },
    async getNewClientBanner() {
      await getNewClientBanner({
        checkCode: this.checkCode,
      }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          this.bannerList = data;
        }
      });
    },
    async queryArticleStock() {
      await queryArticleStock({
        productId: this.productId,
      }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          data.map((item) => {
            switch (item.articleTypeName) {
              case "博赢内参":
                this.article1.params.articleType = item.articleTypeId;
                this.getArticleList(this.article1);
                break;
              case "百战奇略":
                this.article2.params.articleType = item.articleTypeId;
                this.getArticleList(this.article2);
                break;
              case "导读要闻":
                this.article3.params.articleType = item.articleTypeId;
                this.getArticleList(this.article3);
                break;
              case "热点聚焦":
                this.article4.params.articleType = item.articleTypeId;
                this.getArticleList(this.article4);
            }
          });
        }
      });
    },
    async getArticleList(article) {
      await queryArticleList(article.params).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          article.articleList = data.map((item) => {
            item.class = {
              ellipsis: item.articleTitle.length > 10,
            };
            //   dayjs(item.publishTime).format("YYYY-MM-DD") ==
            //   dayjs(Date.now()).format("YYYY-MM-DD");
            item.articleTitle =
              item.articleTitle.length > 10
                ? item.articleTitle.substring(0, 10)
                : item.articleTitle;
            item.icon =
              dayjs(Date.now()).format("YYYY-MM-DD") ==
              dayjs(item.publishTime).format("YYYY-MM-DD");
            item.publishTime = dayjs(item.publishTime).format("MM-DD");
            return item;
          });
        }
      });
    },
    async queryVideoConfig() {
      await queryVideoConfig({
        productId: this.productId,
      }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          this.getWeightVideoList(this.video1);
          data.map((item) => {
            switch (item.channelName) {
              case "乾坤课堂":
                this.video2.params.videoConfigId = item.id || null;
                this.getVideoList(this.video2);
                break;
              case "入门指南":
                this.video3.params.videoConfigId = item.id || null;
                this.getVideoList(this.video3);
            }
          });
        }
      });
    },
    async getWeightVideoList(video) {
      // let { videos } =
      await queryRecordChargeLiveListByWeight({
        ...video.params,
        productId: this.productId,
        clientCentralToken: this.token,
      }).then((back) => {
        if (back.status == 1) {
          let videos = back.data;
          if (video.name == "精品视频") {
            videos = videos
              .filter((item) => item.recordedVideoWeight > 0)
              .sort((a, b) => b.recordedVideoWeight - a.recordedVideoWeight);
          }
          video.videoList = videos.map((item) => {
            item.class = {
              ellipsis: item.subject.length > 10,
            };
            item.subject =
              item.subject.length > 10
                ? item.subject.substring(0, 10)
                : item.subject;
            item.createdTime = dayjs(item.createdTime).format("MM-DD");
            return item;
          });
        }
      });
    },
    async getVideoList(video) {
      await queryRecordChargeLiveList({
        ...video.params,
        productId: this.productId,
        clientCentralToken: this.token,
      }).then((back) => {
        if (back.status == 1) {
          let videos = back.data;
          //   if (video.name == "精品视频") {
          //     videos = videos.filter((item) => item.recordedVideoWeight > 0);
          //   }
          video.videoList = videos.map((item) => {
            item.class = {
              ellipsis: item.subject.length > 10,
            };
            item.subject =
              item.subject.length > 10
                ? item.subject.substring(0, 10)
                : item.subject;
            item.createdTime = dayjs(item.createdTime).format("MM-DD");
            return item;
          });
        }
      });
    },
  },
};
</script>
<style>
.up-l .el-carousel {
  height: 100%;
}
.down-l .el-carousel {
  height: 75%;
}
.el-carousel__button {
  width: 26px;
  height: 10px;
  border: 1px solid transparent;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  opacity: 1;
}
.el-carousel__indicator.is-active button {
  border: 1px solid rgba(228, 228, 228, 0.7);
  background-color: transparent;
}
</style>
<style lang="scss" scoped>
// .carousel-box{
//     position: relative;
// }
.box {
  height: 100%;
  .up {
    height: 69%;
    overflow: hidden;
    .up-l {
      width: 60%;
      height: 100%;
      position: relative;
      .banner {
        cursor: pointer;
      }
    }
    .up-r {
      width: 40%;
      height: 100%;
      .list {
        overflow: auto;
        padding: 7px 0;
        .item {
          font-size: 16px;
          justify-content: space-between;
          padding: 0 11px 0 17px;
          cursor: pointer;
          line-height: 29px;
          position: relative;

          .title {
            color: #e0e0e0;
            white-space: nowrap;
            display: inline-block;
            // text-overflow: ellipsis;
            overflow: hidden;
            // max-width: 83%;
            img {
              display: inline-block;
              width: 26px;
              height: 14px;
            }
            .ellipsis:after {
              content: "...";
              clear: both;
              display: inline-block;
            }
          }
          .time {
            color: #999999;
            display: inline-block;
            width: 45px;
          }
        }
      }
    }
  }
  .down {
    height: 31%;
    overflow: hidden;
    .down-l {
      width: 55%;
      height: 100%;
      .noMore {
        display: block;
        margin: 0 auto;
      }
      .notice {
        padding: 0 16px;
        .more {
          color: #ff8900;
          font-size: 14px;
          text-align: right;
          line-height: 25px;
          cursor: pointer;
        }
        .noticeBox {
          min-width: 291px;
          margin-top: 17px;
          height: 92px;
          background: #212125;
          border-radius: 4px;
          .now {
            width: 31px;
            height: 92px;
            background: linear-gradient(
              90deg,
              rgba(245, 63, 59, 1),
              rgba(241, 97, 51, 1)
            );
            border-radius: 4px 0px 0px 4px;
            color: #ffffff;
            font-size: 18px;
            justify-content: center;
            text-align: center;
            line-height: 22px;
          }
          .last {
            color: #ffffff;
            font-size: 18px;
            width: 31px;
            height: 92px;
            background: linear-gradient(
              90deg,
              rgba(60, 129, 245, 1),
              rgba(52, 101, 241, 1)
            );
            border-radius: 4px 0px 0px 4px;
            justify-content: center;
            text-align: center;
            line-height: 22px;
          }
          .noticeList {
            padding: 6px 0;
            .item {
              font-size: 16px;
              color: #ffffff;
              line-height: 39px;
              .txt {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 56%;
                padding: 0 14px 0 8px;
              }
            }
            .btn {
              width: 78px;
              height: 24px;
              cursor: pointer;
              margin-right: 14px;
              position: relative;
              top: 8px;
              img {
                width: 100%;
                display: block;
              }
            }
          }
        }
      }
      .list {
        padding: 9px 0;
        .item {
          font-size: 16px;
          justify-content: space-between;
          line-height: 29px;
          cursor: pointer;
          padding: 0 15px;
          .title {
            color: #dfdfdf;
            white-space: nowrap;
            display: inline-block;
            // text-overflow: ellipsis;
            overflow: hidden;
            // max-width: 83%;
            &.ellipsis:after {
              content: "...";
              clear: both;
              display: inline-block;
            }
            &:before {
              content: "";
              display: inline-block;
              width: 15px;
              height: 15px;
              background: url(../images/sp.png) no-repeat center;
              background-size: 100%;
              margin-right: 5px;
              position: relative;
              top: 2px;
            }
          }
          .time {
            color: #999999;
            display: inline-block;
            width: 45px;
          }
        }
      }
      .carousel-box {
        justify-content: center;
        align-items: center;
        position: relative;
        height: inherit;
        .carousel {
          width: 72%;
          .whole {
            max-width: 100%;
            max-height: 80%;
            margin-bottom: 16px;
            cursor: pointer;
          }
          .title {
            font-size: 16px;
            color: #dfdfdf;
            white-space: nowrap;
            // text-overflow: ellipsis;
            overflow: hidden;
            cursor: pointer;
            &.ellipsis:after {
              content: "...";
              clear: both;
              display: inline-block;
            }
          }
        }
        .arrow {
          width: 12px;
          height: 20px;
          position: absolute;
          top: 35%;
          cursor: pointer;
          transition: all 0.3s;
          &.arrow-left {
            background: url(../images/before_nor.png) no-repeat center;
            background-size: 100%;
            left: 16px;
            &:hover {
              background: url(../images/before_sel.png) no-repeat center;
              background-size: 100%;
            }
          }
          &.arrow-right {
            background: url(../images/next_nor.png) no-repeat center;
            background-size: 100%;
            right: 16px;
            &:hover {
              background: url(../images/next_sel.png) no-repeat center;
              background-size: 100%;
            }
          }
        }
      }
    }
    .down-r {
      width: 45%;
      height: 100%;
      .list {
        padding: 9px 0;
        .item {
          font-size: 16px;
          justify-content: space-between;
          line-height: 29px;
          cursor: pointer;
          padding: 0 15px;
          .title {
            color: #dfdfdf;
            white-space: nowrap;
            display: inline-block;
            // text-overflow: ellipsis;
            overflow: hidden;
            // max-width: 83%;
            &.ellipsis:after {
              content: "...";
              clear: both;
              display: inline-block;
            }
            &:before {
              content: "";
              display: inline-block;
              width: 15px;
              height: 15px;
              background: url(../images/sp.png) no-repeat center;
              background-size: 100%;
              margin-right: 5px;
              position: relative;
              top: 2px;
            }
          }
          .time {
            color: #999999;
            display: inline-block;
            width: 45px;
          }
        }
      }
      .noMore {
        justify-content: center;
        align-items: center;
      }
      .stock {
        padding: 9px 0;
        overflow: auto;
        .item {
          line-height: 29px;
          padding: 0 16px;
          justify-content: space-between;
          font-size: 16px;
          .code {
            color: #dfdfdf;
          }
          .people {
            color: #999999;
            .num {
              color: #e92727;
            }
          }
        }
      }
      .query {
        padding-left: 16px;
        height: 64px;
        border-top: 1px solid #27272d;
        align-items: center;
        .count {
          font-size: 16px;
          color: #bbbfc3;
          white-space: nowrap;
          .num {
            color: #e92727;
          }
        }
        .stockInput {
          position: relative;
          input {
            background: #1b1b21;
            border: 1px solid #747474;
            outline: none;
            height: 36px;
            color: #bbbfc3;
            font-size: 16px;
            padding-left: 10px;
            margin: 0 10px;
            border-radius: 4px;
          }
          .stockList-items {
            position: absolute;
            background: #25262a;
            width: 250px;
            color: #bcbfc4;
            border: 1px solid #434448;
            left: 10px;
            cursor: pointer;
            .stockList-item {
              transition: 0.15s all;
              font-size: 15px;
              .cell {
                height: 30px;
                line-height: 30px;
                width: 80px;
                text-align: center;
                float: left;
                &.cell1 {
                  width: 50px;
                }
                &.cell4 {
                  width: 90px;
                }
              }
              &:hover {
                background: #2c2d30;
              }
            }
            &.top {
              bottom: 40px;
            }
          }
        }
        .btn {
          width: 84px;
          height: 36px;
          background: url(../images/lijitiwen.png) no-repeat center;
          background-size: 100%;
          cursor: pointer;
          &.notQuery {
            background: url(../images/xczl.png) no-repeat center;
            // cursor: none;
          }
        }
      }
    }
  }
  .layer {
    font-size: 16px;
    color: #ff8900;
    line-height: 40px;
    border-radius: 4px;
    padding: 0 38px;
    position: absolute;
    background: #2d2d31;
    top: 50%;
    margin-top: -20px;
    left: 50%;
    margin-left: -78px;
    &.noHave {
      margin-left: -164px;
    }
  }
  .refurbish {
    width: 119px;
    height: 40px;
    background: #000000;
    border: 1px solid #492700;
    box-shadow: 0px 6px 6px 0px #000000;
    opacity: 0.7;
    border-radius: 20px 0px 0px 20px;
    font-size: 20px;
    font-weight: 400;
    color: #ff8900;
    line-height: 40px;
    text-align: center;
    position: fixed;
    bottom: 256px;
    right: 0;
    border-right: 0;
    cursor: pointer;
  }
  .timeTable {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    z-index: 100;
    .box {
      width: 575px;
      height: 467px;
      background: url(../images/tanchuangbg.png) no-repeat center;
      background-size: 100%;
      position: relative;
      padding-top: 25px;
      box-sizing: border-box;
      z-index: -5;
      .close {
        display: inline-block;
        width: 32px;
        height: 32px;
        background: url(../images/x.png) no-repeat center;
        cursor: pointer;
        position: absolute;
        top: 14px;
        right: 14px;
      }
      .title {
        height: 44px;
        background: url(../images/kcb1.png) no-repeat center;
        margin-bottom: 19px;
      }
      .container {
        width: 481px;
        height: 343px;
        margin: 0 auto;
        background: #1b1b21;
        position: relative;
        box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 1);
        border-radius: 4px;
        .noMore {
          height: 100%;
          align-items: center;
          justify-content: center;
        }
        &:after {
          content: "";
          position: absolute;
          top: -1px;
          bottom: -1px;
          left: -1px;
          right: -1px;
          background: linear-gradient(
            41deg,
            rgba(116, 116, 116, 1),
            rgba(188, 188, 188, 1),
            rgba(116, 116, 116, 1)
          );
          border-radius: 4px;
          z-index: -3;
        }
        .list {
          height: 100%;
          overflow: auto;
          .item {
            line-height: 49px;
            text-align: center;
            background: rgba(27, 27, 33, 0.2);
            position: relative;
            border-bottom: 1px solid rgba(116, 116, 116, 0.2);
            span {
              font-size: 20px;
              color: #ffffff;
              padding: 0 15px;
            }
          }
        }
      }
    }
  }
}
</style>
